<template>
	<div class="print">
		<el-row justify="center" align="middle">
			<el-col :span="12" v-for="(item, index) in drawQr" :key="item">
				<div
					:class="getFlag(index) ? '' : 'left'"
					:id="'smallSize' + index"
					:style="smallBarcodeStyle"
				></div>
				<div
					:class="getFlag(index) ? '' : 'left'"
					style="font-size:20px;margin-top:5px"
					v-if="isShowCode"
				>
					{{ item }}
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import QRcode from 'qrcodejs2';

export default {
	components: {
		// barcode: VueBarcode
	},
	props: {
		drawQr: { type: Array, default: [] },
		smallBarcodeStyle: { type: String, default: 'padding-top:50px' },
		isShowCode: { type: Boolean, default: true }
	},
	created() {
		// this.paginator(this.delInfo)
	},
	mounted() {
		this.$nextTick(() => {
			this.qrcode();
		});
	},
	data() {
		return {};
	},
	methods: {
		getFlag(index) {
			if (index % 2 == 0) {
				return true;
			} else {
				return false;
			}
		},
		qrcode() {
			this.drawQr.map((x, index) => {
				document.getElementById(`smallSize${index}`).innerHTML = '';
				let qrcode = new QRcode(`smallSize${index}`, {
					width: 130,
					height: 130,
					text: x
				});
			});
		}
	},
	watch: {
		drawQr: {
		handler(newVal) {
			if(newVal) {
			this.$nextTick(() => {
				this.qrcode();
			})
			}
		}
		}
	}
};
</script>

<style scoped>
.left {
	padding-left: 80px;
}
</style>
